<template>
  <!-- 首页系统更新 -->
  <div class="update-log">
    <!-- 系统更新顶部标题 -->
    <div class="page-block-title">
      <div class="systitle">系统更新</div>
      <div class="top-num">已累计更新 {{ updateNum }} 次</div>
    </div>
    <!-- 列表 -->
    <div class="list">
      <div
        class="update-log-row"
        v-for="item in updateList"
        :key="item.id"
        @click="openItemDrawer(item)"
      >
        <div class="update-log-title f12">
          <div class="one-line-show">【{{ item.text }}】</div>
          <div>{{ item.create_time }}</div>
        </div>
        <div class="update-log-name text-hover-primary f16 one-line-show">
          {{ item.name }}
        </div>
      </div>
    </div>
    <!-- 查看更多 -->
    <div class="look-more" @click="() => router.push('/system/log')">
      查看更多<el-icon><ArrowRight /></el-icon>
    </div>
    <!-- 引入 UpdateLogDrawer 组件 -->
    <UpdateLogDrawer
      v-bind="drawerProps"
      :drawerInfo="drawerInfo"
      @update:modelValue="updateDrawerValue"
      @update:visible="updateDrawerValue(false)"
    />
  </div>
</template>

<script lang="tsx" setup>
import { ref, watch, onMounted } from 'vue';
// 抽屉组件
import UpdateLogDrawer from './updateLogDrawer.vue';
// 引入 PropType，用于定义传入数据的类型
import { PropType } from 'vue';
import { TabItem } from '@/types/dashboard/index';
import { useRouter } from 'vue-router';
const drawerInfo = ref({});
const router = useRouter();
import system from '@/modules';
const { getUpdateListApi } = system;
// 抽屉信息
const selectedItem = ref({});
// 数据列表
const updateList = ref<TabItem>();
// 累计更新次数
const updateNum = ref(0);
// 接收 props
const props = defineProps({
  systemUpdateTabs: {
    type: Array as PropType<TabItem[]>, // tabs 的类型是 TabItem 数组
    required: true,
  },
});
// 抽屉的 props - 指定类型
const drawerProps = ref<{
  modelValue: boolean;
  systemUpdateTabs: TabItem[]; // 明确指定数组类型为 TabItem[]
}>({
  modelValue: false, // 控制抽屉显示
  systemUpdateTabs: [], // 初始化为空数组
});

// 处理点击事件，打开抽屉
const openItemDrawer = (item: any) => {
  drawerProps.value.modelValue = true;
  selectedItem.value = item;
};
// 更新 drawerProps 的 modelValue
const updateDrawerValue = (value: boolean) => {
  drawerProps.value.modelValue = value; // 更新 modelValue
};
const getList = async () => {
  const { data } = await getUpdateListApi({
    page: 1,
    pageSize: 5,
    type: 1,
  });
  updateList.value = data.data;
  updateNum.value = data.total;
};

// 抽屉的tab
watch(
  () => props.systemUpdateTabs,
  (newValue) => {
    drawerProps.value.systemUpdateTabs = newValue;
  },
  { deep: true, immediate: true }
);
watch(
  () => drawerProps.value.modelValue,
  (newValue) => {
    if (newValue) {
      drawerInfo.value = selectedItem.value;
    }
  },
  { deep: true, immediate: true }
);
onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped src="./index.scss"></style>
